<template>
  <div class="container mtop-30">
    <div class="header">
      <el-input type="textarea"
                v-model="textarea"
                maxlength="30"
                show-word-limit>
      </el-input>
      <div class="btn-wrap mtop-10">
        <div class="at-btn">
          <button class="font-18 no-btn">
            @
          </button>
          <button class="font-18 no-btn">#</button>
        </div>
        <div class="send-btn">
          <button class="btn btn-white">评论</button>
        </div>
      </div>
    </div>
    <div class="comment">
      <!-- 热门评论 -->
      <div class="hot-wrap mtop-20">
        <div class="font-16 fsize-b">精彩评论</div>
        <ComentItem v-for="item in hotList"
                    :key="item.commentId"
                    :item="item"
                    identy="hot"
                    @like="handleLike"
                    @reply="handleReply"
                    @clickUser="toUserDetail" />
        <div class="more-btn-wrap mtop-20">
          <button class="btn btn-white">更多精彩评论></button>
        </div>
      </div>
      <!-- 最新评论 -->
      <div ref="newListRef"
           class="hot-wrap mtop-20"
           v-if="newList.length !== 0">
        <div class="font-16 font-bold">最新评论({{ newCount }})</div>
        <ComentItem v-for="item in newList"
                    :key="item.commentId"
                    :item="item"
                    identy="new"
                    @like="handleLike"
                    @reply="handleReply"
                    @clickUser="toUserDetail" />
        <div class="flex_center"
             style="margin-top: 10px">
          <el-pagination @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-size="20"
                         layout="prev, pager, next"
                         :total="newCount"
                         background>
          </el-pagination>
        </div>
      </div>
      <div v-if="newCount === 0"
           style="color: #9f9f9f; text-align: center">
        还没有评论，快来抢沙发~
      </div>
    </div>
  </div>
</template>

<script>
import ComentItem from './commentItem'
import { getNewComment, getHotComment } from '@/api/comment'
export default {
  data () {
    return {
      currentPage: 1,
      hotList: [],//热评
      newList: [],//新评
      newCount: 0,
      textarea: '',
      commentList: [],
      query: {
        id: '',
        limit: 20,
        offset: 0,
        before: 0,
        type: this.type,
      },
      hotQuery: {
        id: '',
        type: this.type,
        limit: 5,
        offset: '',
        before: ''
      }
    }
  },
  props: {
    id: {
      type: [Number, String],
      required: true
    },
    /* type: 0: 歌曲 1: mv 2: 歌单 3: 专辑 4: 电台 5: 视频 6: 动态 */
    type: {
      type: Number,
      required: true
    },
    active: Boolean,
  },
  components: { ComentItem },

  methods: {
    // 获取最热品论
    async getHotComment () {
      let res = await getHotComment(this.id, this.type, 5)
      if (res.code !== 200) return
      this.hotList = res.hotComments
    },
    // 获取最新评论
    async getNewComment () {
      let res = await getNewComment(this.query)
      if (res.code !== 200) return
      this.newCount = res.total
      this.newList = res.comments
    },
    handleLike () {

    },
    handleReply () { },
    toUserDetail () { },
    /* 页码变化的回调 */
    handleCurrentChange (val) {
      this.currentPage = val
      this.query.offset = (val - 1) * 20
      this.getNewComment()
      this.toTopAnimation(
        this.$refs.newListRef.offsetTop - this.scrollOffset,
        document.querySelector(this.scrollDom),
        600
      )
    },
    /* 滚动条由下至上的动画js动画 */
    toTopAnimation (target, scrollDom, ms = 500) {
      let start
      let begin = scrollDom.scrollTop
      let size = (begin - target) / ms
      const step = (timestamp) => {
        if (start === undefined) start = timestamp
        const elapsed = timestamp - start
        /* 防止上滑过头 */
        scrollDom.scrollTop = Math.max(begin - size * elapsed, target)
        if (elapsed < ms) {
          // 在ms毫秒后停止动画
          window.requestAnimationFrame(step)
        }
      }
      window.requestAnimationFrame(step)
    }
  },
  watch: {
    active: {
      immediate: true,
      handler (val) {
        if (!val || this.newList.length !== 0) return
        this.getNewComment()
        this.getHotComment()
      }
    },
    id (val) {
      /* 监听ID，改变后重新获取数据 */
      console.log('评论的资源ID改变了', val, this.id, this.type)
      if (!val) return
      this.hotList = []
      this.query.id = val
      this.hotQuery.id = val
      this.getNewComment()
      this.getHotComment()
    }

  }
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  padding: 30px 0 30px 0;
  background-color: #fff;
  .header {
    .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      .at-btn {
        margin-left: 10px;
        width: 60px;
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #fff;
        .font-18 {
          font-size: 18px;
          margin-left: 10px;
        }
      }
    }
  }
  .comment {
    .more-btn-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>